<template>
  <div :style="cssObj">
    <Alert closable show-icon type="info" :style="{margin: '10px'}">
      操作提示：请先拖拽布局块至画布，之后单机需要操作的布局块，即可拖拽组件至激活的布局块中。
    </Alert>
    <Collapse simple value="layoutItemCard_panel" :style="cssObj">
      <Panel name="layoutItemCard_panel">
        布局块
        <div slot="content">
          <Row :gutter="5">
            <i-col span="8">
              <Poptip :transfer="true" :word-wrap="true" title="组件信息" placement="right-start">
                <div title="单击可以显示组件信息" class="layoutItem-card" :data-component="'defaultLayoutItem'">
                  <p>默认布局块</p>
                </div>
                <div class="api" slot="content">
                  <span>系统默认布局块</span>
                </div>
              </Poptip>
            </i-col>

          </Row>
        </div>
      </Panel>
      <Panel :name="lib.id" v-for="lib in componentLibrary" :key="lib.id">
        {{lib.name}}
        <div slot="content">
          <Row :gutter="5">
            <i-col span="8" v-for="compinfo in lib.compinfos" :key="compinfo.id">
              <Poptip :transfer="true" :word-wrap="true" title="组件信息" placement="right-start">
                <div title="单击可以显示组件信息" class="comp-card" :data-component="compinfo.name">
                  <p>{{compinfo.aliasName}}</p>
                </div>
                <div class="api" slot="content">
                  <span>{{compinfo.remark}}</span>
                </div>
              </Poptip>
            </i-col>

          </Row>
        </div>
      </Panel>

    </Collapse>
  </div>

</template>

<script>
  export default {
    name: 'ComponentLibrary',
    props: {
      cssObj: {
        type: Object
      }
    },
    data() {
      return {
        componentLibrary: []
      }
    },
    mounted() {
      this.loadComponentLibrary().then(result => {
        this.registerComponentLibraryDrag()
      })
    },
    methods: {
      /**
       * 加载组件库数据
       */
      async loadComponentLibrary () {
        return await this.$PnApi.CompinfoApi.buildComponentLibrary().then(result=>{
          this.componentLibrary = result.data.data;
        })
      },
      registerComponentLibraryDrag () {
        if($('.comp-card').draggable() && $('.layoutItem-card').draggable()) {
          $('.comp-card').draggable('destroy');
          $('.layoutItem-card').draggable('destroy');
        }
        $('.comp-card').draggable({
          zIndex: 999,
          revert: "invalid",
          helper: 'clone',
          containment: 'body',
          appendTo: 'body',
          scope: 'layoutItemScope'
        });
        $('.layoutItem-card').draggable({
          zIndex: 999,
          revert: "invalid",
          helper: 'clone',
          containment: 'body',
          appendTo: 'body'
        });
      },
    },
    computed: {}
  }
</script>

<style scoped>

  .layoutItem-card {
    width: 85px;
    height: 50px;
    background-color: #BBBBBB;
    border-radius: 4px;
    padding: 10px;
    cursor: move;
    word-break:break-all;
    margin-bottom: 5px;
  }

  .comp-card {
    width: 85px;
    height: 50px;
    background-color: #BBBBBB;
    border-radius: 4px;
    padding: 10px;
    cursor: move;
    word-break:break-all;
    margin-bottom: 5px;
  }
</style>
